<template>
  <div class="collect_goods">
    <div class="collect_top">
      <div class="top_l">
        <span class="bi bi-chevron-compact-left"  @click="backFn"></span>
        <span>我的收藏</span>
      </div>
      <div class="top_r" @click="switchBtn">
        <span v-if="!isTotall">编辑</span>
        <span v-if="isTotall">完成</span>
      </div>
    </div>
    <div class="top_list">
      <ul>
        <li v-for="(item,index) in goodsList[0]" :key="index">
          <a href="#">
            <div class="goodContent">
              <div class="radio"  @click="thenClidk(index)">
                <input type="checkbox" v-model="item.check" />
                <i class="icon"></i>
              </div>
              <div class="picture">
                <img :src="item.path" alt="" />
              </div>
              <div class="good_txt">
                <div class="title">
                  <span>{{ item.title }}</span>
                </div>
                <div class="price">
                  <span>￥</span>
                  <span>{{ item.price }}</span>
                </div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="cancel_collect" v-if="isTotall">
      <div class="selectAll">
        <input type="checkbox" v-model="check"/>
        <i class="icon"></i>
      </div>
      <div class="selected" @click="selectedAll">
        <span>全选</span>
      </div>
      <div class="btn-collect" ref="collect" @click="deleteFn">
        <span>取消收藏({{amount}})</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTotall: false,
      check : false,
      amount : 0,
      goodsList: [],
    };
  },
  methods: {
    switchBtn() {
      this.isTotall = !this.isTotall;
    },
    backFn(){
        this.$router.go(-1);
    },
    //全选
    selectedAll() {
      let _this = this;
      this.check = !this.check;
      if (this.check) {
        _this.goodsList[0].forEach((item) => {
          item.check = true;
      this.$refs.collect.style.background = "linear-gradient(to right, #7028e4, #ee609c)";
        });
      } else if (!this.check) {
        _this.goodsList[0].forEach((item) => {
          item.check = false;
          this.$refs.collect.style.background = "#d7d7d7";
        });
      }
    },
    //单击
    thenClidk(index){
      let selected = this.goodsList[0];
      let selectBtn = selected[index];
      console.log(selectBtn);
      if(selectBtn.check == true){
      selectBtn.check = false;
      this.$refs.collect.style.background = "#d7d7d7";
      }else{
      selectBtn.check = true;
      this.$refs.collect.style.background = "linear-gradient(to right, #7028e4, #ee609c)";
      }
    },
     // 删除
    deleteFn(){
      let selected = this.goodsList[0];
      selected = selected.filter( function (item) {
         return !item.check;
       }) 
       localStorage.removeItem("collectList");
    }
  },
  watch:{
     goodsList:{
       handler(value){
        //  数组里的每个对象
        //  console.log(value.length);
         let _this = this;
         let count = 0;
        //  循环数组里的对象
         for(let i = 0;i < value.length;i++){
          //  当check为true时,自增一
           if(value[i].check === true){
             count ++;
           }
         }
         if(count === value.length){
           _this.check = true;
         }else{
           _this.check = false;
         }
       },
       deep : true
     }
  },
  created(){
     let collect = localStorage.getItem('collectList');
     this.goodsList.push(JSON.parse(collect));
     console.log(this.goodsList);
  },
  mounted(){
     this.amount = this.goodsList.length;
  }
}
</script>

<style lang="less">
@import "../../assets/css/reset.css";

.collect_goods {
  width: 100%;
  height: 667px;
  background: #f0f1f3;
}
.collect_top {
  width: 100%;
  height: 60px;
  background: #fff;
  margin-bottom: 10px;
  &::before {
    content: "";
    display: block;
    clear: both;
  }
  .top_l {
    width: 200px;
    height: 60px;
    line-height: 60px;
    float: left;
    span {
      &:first-child {
        font-size: 28px;
      }
      &:last-child {
        font-size: 22px;
        line-height: 50px;
      }
    }
  }
  .top_r {
    width: 60px;
    height: 60px;
    line-height: 60px;
    float: right;
    font-size: 22px;
  }
}

.top_list {
  ul li {
    width: 100%;
    height: 160px;
  }
}
.goodContent {
  width: 96%;
  height: 150px;
  margin-left: 8px;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  font-size: 16px;
  > div {
    float: left;
  }
  .radio {
    width: 50px;
    height: 160px;
    text-align: center;
    position: relative;
    input {
      display: none;
    }
    .icon {
      position: absolute;
      display: inline-block;
      width: 18px;
      height: 18px;
      border: 1px solid #ccc;
      border-radius: 50%;
      top: 45%;
      left: 30%;
    }
    input:checked + .icon {
      background-color: #cf3bed;
      border-color: #cf3bed;
      background-image: url();
      background-size: 0.21rem 0.15rem;
      background-repeat: no-repeat;
      background-position: 50%;
    }
  }
  .picture {
    width: 120px;
    height: 125px;
    margin-top: 15px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .good_txt {
    width: 180px;
    height: 160px;
    padding-right: 5px;
    padding-left: 10px;
    box-sizing: border-box;
    .title {
      width: 100%;
      height: 42px;
      padding-top: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
    }
    .price {
      width: 100%;
      height: 45px;
      line-height: 45px;
      margin-top: 30px;
      color: #9b33b6;
      span {
        &:first-child {
          font-size: 16px;
        }
        &:last-child {
          font-size: 24px;
        }
      }
    }
  }
}

.cancel_collect {
  width: 100%;
  height: 60px;
  bottom: 0;
  left: 0;
  position: fixed;
  background: #fff;
  > div {
    float: left;
  }
  .selectAll {
    width: 50px;
    height: 60px;
    text-align: center;
    input {
      display: none;
    }
    .icon {
      position: absolute;
      display: inline-block;
      width: 18px;
      height: 18px;
      border: 1px solid #ccc;
      border-radius: 50%;
      margin-top: 18px;
      margin-left: -8px;
    }
    input:checked + .icon {
      background-color: #cf3bed;
      border-color: #cf3bed;
      background-image: url();
      background-size: 0.21rem 0.15rem;
      background-repeat: no-repeat;
      background-position: 50%;
    }
  }
  .selected {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
  }
  .btn-collect {
    width: 150px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50px;
    font-size: 18px;
    float: right;
    margin-top: 8px;
    margin-right: 5px;
    color: #fff;
    background: #d7d7d7;
  }
}
</style>